<template>
  <BasicContainer>
    <ElForm :inline="true">
      <ElFormItem>
        <ElButton v-if="!(concurentType === 'view')" icon="el-icon-plus" type="primary" @click="openSelectUserDialog">
          添加
        </ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable border :data="dutyDeptData" default-expand-all>
      <ElTableColumn prop="dutyUsername" label="责任人名称" :show-overflow-tooltip="true" />
      <ElTableColumn prop="dutyName" label="责任部门名称" align="center" />
      <ElTableColumn label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <ElButton
            v-if="!(concurentType === 'view')"
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="deleteDutyname(scope.$index, scope.row)">
            删除
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <SelectUser v-if="visibleSelectUser" ref="selectUser" :allow-choose-num="-1" @getUserData="getUserData" />
  </BasicContainer>
</template>

<script>
  import { addRectifyDetaileds, getRectifyDetailedList, delRectifyDetailed } from '@/api/problem/rectifydetailed'

  export default {
    name: 'RectifyDetailTable',
    props: {
      rectifyId: {
        type: String,
        default: '-1'
      },
      rectifyNum: {
        type: String,
        default: ''
      },
      concurentType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dutyDeptData: [],
        saveData: [],
        visibleSelectUser: false
      }
    },
    methods: {
      loadResponsiPepople(rectifyId, rectifyNum) {
        this.dutyDeptData = []
        const query = { rectifyId: parseInt(rectifyId) }
        getRectifyDetailedList(query).then(response => {
          this.dutyDeptData = response.data.data
        })
      },
      /** 添加责任人 */
      addResponsiPepople() {
        this.dutyDeptData = []
        // console.log(this.rectifyId, this.rectifyNum)
        const query = { rectifyId: parseInt(this.rectifyId) }
        getRectifyDetailedList(query).then(response => {
          this.dutyDeptData = response.data.data
        })
      },
      deleteDutyname(index, row) {
        if (row.id !== undefined) {
          delRectifyDetailed(row.id)
        }
        this.dutyDeptData.splice(index, 1)
      },
      // 获取选择的用户信息
      getUserData(userData) {
        // console.log(userData)
        this.saveData = []
        for (let i = 0; i < userData.length; i++) {
          let isNotExist = true
          for (let j = 0; j < this.dutyDeptData.length; j++) {
            if (userData[i].userId === this.dutyDeptData[j].dutyUserid) {
              isNotExist = false
              break
            }
          }
          if (isNotExist) {
            const data = {}
            data.dutyName = userData[i].deptName
            data.dutyOuid = userData[i].deptId
            data.dutyFullname = userData[i].deptFullName
            data.dutyUserid = userData[i].userId
            data.dutyUsername = userData[i].realName
            this.saveData.push(data)
            this.dutyDeptData.push(data)
          }
        }
        if (this.saveData.length !== 0 && this.concurentType !== 'add') {
          this.saveDudyDept()
        }
      },
      // 打开选择用户选择框
      openSelectUserDialog() {
        this.visibleSelectUser = true
        this.$nextTick(() => {
          this.$refs.selectUser.init()
        })
      },
      // 保存责任人
      saveDudyDept() {
        if (this.saveData.length > 0) {
          for (let i = 0; i < this.saveData.length; i++) {
            this.saveData[i].rectifyId = parseInt(this.rectifyId)
            this.saveData[i].rectifyNum = this.rectifyNum
          }
          addRectifyDetaileds(this.saveData)
            .then(data => {
              this.$message.success('添加成功')
            })
            .catch(() => {})
        }
      }
    }
  }
</script>
